window.onload = function(){
    // 头部搜索块的js效果
   moveEffect(140);
   countDown(3700);
   broadcast_pictures(document);
}

/*功能：移动屏幕 搜索框的透明度随着移出的高度变化而变化
* @param1:设置body移出的最大高度
*/
function moveEffect(scrollHeight){
    var search = document.querySelector(".jd_search");
    window.onscroll = function(){
        // 获取document移初屏幕的高度
        var offsetTop = document.documentElement.scrollTop;
        var opacity = 0;
        // 如果大于scrollHeight 则不再计算
        if ( offsetTop <= scrollHeight) { 
            // 透明度 = 移出高度 / 设置最大高度        
            opacity = offsetTop/scrollHeight;
            // 修改透明度
            search.style.backgroundColor = "rgba(255,0,0,"+opacity+")";
        }
    }
}

/* 功能：倒计时
 * @param1:总时长/毫秒
*/
function countDown(totalTime){
    var spans = document.querySelectorAll(".jd_sk_time span");

    var hours = 0;
    var mins = 0;
    var seconds = 0;
    // 毫秒单位转换成 时/分/秒
    var countor = setInterval(function(){
        hours = Math.floor(totalTime/3600);
        spans[0].textContent = Math.floor(hours/10);
        spans[1].textContent = hours%10;
        mins = Math.floor(totalTime%(3600)/60);
        spans[3].textContent = Math.floor(mins/10);
        spans[4].textContent = mins%10;
        seconds = Math.floor(totalTime%60);
        spans[6].textContent = Math.floor(seconds/10);
        spans[7].textContent = seconds%10;
        if (totalTime == 0) {
            clearInterval(countor);
        }
        totalTime -= 1;
    },1000);
}
/* 功能：轮播图
 * @param1:传入docuemnt 减少作用域链的遍历
 *  */ 
function broadcast_pictures(document) {
    var ul = document.querySelector(".jd_bannerImg");
    var width = document.querySelector(".jd_bannerImg li").offsetWidth;
    var dotteds = document.querySelectorAll(".jd_bannerIndicator li");
    // 一共五张图片 第一张和和第四张相同 第五章和第二张相同
    // counter:-1 0 1 2 3 
    var counter = 0;
    ul.style.left = - width + "px";

    /*功能：根据给定的counter值 自动的轮播
     * 
     *  */
    // 自动轮播
    var timeId = null;
    function startClock(){
        touchMoveJudeg();
        timeId = setInterval(function(){
            counter +=1;
            // 如果为前四张图
            if (counter < 4) {
                // 添加过渡效果
                ul.style.transition = "left 1.5s linear";
                // 改变left 产生动画
                ul.style.left = -width*(counter+1)+"px"; 
                // 点的效果通过类名的添加和删除来实现
                for (var i = 0,len = dotteds.length; i < len; i++) {
                    dotteds[i].className = '';
                }
                if (counter < 3) {
                    dotteds[counter].className = "active";
                }else{
                    dotteds[0].className = "active";
                }
            }else {
                // 此刻为第四张  我们得将left设置为0
                // 去除动画效果
                ul.style.transition = "";
                ul.style.left = -width + "px";
                // counter为1
                counter = 0;
            }
        },2500);
    };
    startClock();
    // 手动轮播
    var startX,moveX,distanceX;
    // 触摸开始
    ul.addEventListener("touchstart",function(e){
        // 清除定时器
        clearInterval(timeId);
        // 获取设置的初始位置
        startX = e.targetTouches[0].clientX;
    });
    // 滑动
    ul.addEventListener("touchmove",function(e){
        // 记录设置在滑动工程中的位置
        moveX = e.targetTouches[0].clientX; 
        // 计算差值
        distanceX = moveX - startX;
        // 关闭过度效果
        ul.style.transition = "none";
        // 实现元素的偏移 
        // 计算公式：上一次的left = - width * counter + distanceX
        ul.style.left  = - width * (counter+1) + distanceX + "px";
    });
    // 触摸结束
    ul.addEventListener("touchend",function(e){
        if (Math.abs(distanceX) >= 1/3 * width) {
            ul.style.left = distanceX/Math.abs(distanceX) * width - width * (counter+1)+"px"; 
            counter = counter - distanceX/Math.abs(distanceX);
        }else{
            ul.style.left = - width * (counter+1) +"px";
        }
        startClock();
    });

    /*功能：当是手指移动banner时 对ul进行合理的位移 以及counter的重计算
     * 
     *  */
    function touchMoveJudeg(){
        // 点的效果通过类名的添加和删除来实现
        for (var i = 0,len = dotteds.length; i < len; i++) {
            dotteds[i].className = '';
        }
        if (counter < 3) {
            // counter = -1 说明是第一张
            if (counter < 0 ) {
                dotteds[len-1].className = "active";
                // 改变counter为第四张的counter
                counter = len-1;
                // 去除过渡动画
                ul.style.transition = "none";   
                // 瞬间移动到第四章
                ul.style.left = -width * (counter+1) + "px";
            }else {
                dotteds[counter].className = "active";
            }
        }else{
            dotteds[0].className = "active";                
                // 改变counter为第一张的counter
                counter = 0;
                // 去除过渡动画
                ul.style.transition = "none";   
                // 瞬间移动到第二章
                ul.style.left = - width + "px";
        }
    }
}
